<template>
  <div class="v-auth-mgt">
    <c-row-crumb :title="multLang('title_am_z')">
      <c-auth-add @close="query"></c-auth-add>
      <el-button @click="cloneRole">
        {{ multLang('title_pe') }}
      </el-button>
      <el-button @click="del">{{ multLang('btn_delete_a') }}</el-button>
    </c-row-crumb>
    <c-row less-width="20px" class="v-auth-bot">
      <c-col :col="3" top>
        <div class="v-auth-title">
          {{ multLang('title_name_w') }}
        </div>
        <c-row-search class="v-auth-search" single>
          <el-form :model="tree" ref="tree" @submit.native.prevent>
            <c-row less-width="66px" :col="12">
              <c-col>
                <el-form-item prop="keywordSearch">
                  <el-input
                    v-model="tree.keywordSearch"
                    clearable
                    @keyup.enter.native="query"
                    :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
                  >
                    <c-icon slot="prefix" name="search" prefix></c-icon>
                  </el-input>
                </el-form-item>
              </c-col>
              <c-col less right>
                <el-form-item>
                  <el-button type="primary" @click="query">
                    {{ multLang('btn_search_a') }}
                  </el-button>
                </el-form-item>
              </c-col>
            </c-row>
          </el-form>
        </c-row-search>
        <c-roll class="v-auth-menu">
          <el-tree
            ref="tree"
            :data="tree.data"
            node-key="nid"
            @node-click="treeClick"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
          ></el-tree>
        </c-roll>
      </c-col>
      <c-col less></c-col>
      <c-col :col="9" top>
        <c-roll transparent>
          <c-row-view :title="multLang('tab_info_a')">
            <template #opn>
              <c-row-view-opn
                :auth="true"
                :visible.sync="visibles.edit"
                @cancel="cancel"
                @save="save"
              >
              </c-row-view-opn>
            </template>
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="140px"
              :validate-on-rule-change="false"
            >
              <c-row>
                <c-col :col="4">
                  <el-form-item
                    :label="multLang('title_name_w', ':')"
                    prop="name"
                  >
                    <c-form-edit :visible="visibles.edit">
                      <template #edit>
                        <el-input
                          v-model="form.name"
                          :placeholder="multLang('text_d')"
                        ></el-input>
                      </template>
                      <span>{{ form.name }}</span>
                    </c-form-edit>
                  </el-form-item>
                </c-col>
                <c-col :col="11">
                  <el-form-item
                    :label="multLang('text_bd', ':')"
                    prop="description"
                  >
                    <c-form-edit :visible="visibles.edit" long>
                      <template #edit>
                        <c-input-text v-model="form.description"></c-input-text>
                      </template>
                      <c-textarea>{{ form.description }}</c-textarea>
                    </c-form-edit>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-row-view>
          <c-tabs
            value="feature"
            :class="[
              'v-auth-tabs',
              visibles.edit ? 'v-auth-tabs-edit-open' : 'v-auth-tabs-edit-close'
            ]"
          >
            <el-tab-pane
              name="feature"
              :label="multLang('title_ai_q', 'title_aak_n')"
            >
              <c-auth-feature
                :info="tree.click"
                :data="authFeature.data"
                @query="getAuthFeatureData"
              ></c-auth-feature>
            </el-tab-pane>
            <el-tab-pane
              name="data"
              :label="multLang('title_aat_p', 'title_aak_n')"
            >
              <c-auth-data
                :info="tree.click"
                :data="authData"
                @query="queryAuthData"
              ></c-auth-data>
            </el-tab-pane>
          </c-tabs>
        </c-roll>
      </c-col>
    </c-row>
  </div>
</template>
<script>
import CAuthFeature from './mod/Feature.vue'
import CAuthData from './mod/Data.vue'
import CAuthAdd from './Add.vue'
import {
  getRoleData,
  getAuthPositionData,
  getAuthEqptTypeData,
  getAuthFeatureData,
  getAuthWorkTypeData,
  editAuthData,
  delAuthData,
  cloneRole
} from '@/http/api/v1/auth'

export default {
  name: 'VAuthMgt',
  components: { CAuthFeature, CAuthData, CAuthAdd },
  props: {},
  data() {
    return {
      visibles: { edit: false },
      authFeature: {
        data: []
      },
      authData: [],
      form: {
        name: '',
        description: ''
      },
      tree: {
        nid: null,
        keywordSearch: '',
        click: {},
        data: [],
        filterData: []
      }
    }
  },
  computed: {
    rules() {
      return {
        name: {
          required: true,
          message: this.tplLang('title_name_w', ['title_aah_f']),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.query()
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    del() {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_am_y']),
        this.multLang('btn_delete_a', 'title_am_y'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { id } = this.tree.click
        id &&
          delAuthData({
            id
          }).then(() => {
            this.tree.click = {}
            this.query()
          })
      })
    },
    cancel() {
      this.setForm()
      this.visibles.edit = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    setForm() {
      const { label = '', remark = '' } = this.tree.click
      this.form.name = label
      this.form.description = remark
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { id } = this.tree.click
          editAuthData({ id, ...this.form }).then(() => {
            this.visibles.edit = false
            this.query()
          })
        }
      })
    },

    cloneRole() {
      const { id } = this.tree.click
      id &&
        cloneRole({ id }).then(() => {
          this.query()
        })
    },
    treeClick(node) {
      const { id, children } = node
      id || (node = children[0] || this.tree.click)
      if (node) {
        this.tree.click = node
        this.$refs.tree.setCurrentKey(node.nid)
        this.getAuthFeatureData()
        this.queryAuthData()
        this.setForm()
      }
    },
    query() {
      const { keywordSearch } = this.tree
      getRoleData({
        keywordSearch
      }).then(({ data }) => {
        this.tree.data = data
        const nid =
          this.tree.click.nid ||
          (data[1].children[0] && data[1].children[0].nid)
        nid &&
          this.$nextTick().then(() => {
            this.$refs.tree.setCurrentKey(nid)
            this.treeClick(this.$refs.tree.getCurrentNode())
          })
      })
    },
    getAuthFeatureData() {
      const { id } = this.tree.click
      id &&
        getAuthFeatureData({ id }).then(({ data }) => {
          this.authFeature.data = data
        })
    },
    async queryAuthData() {
      const { id } = this.tree.click
      const ad = []
      if (id) {
        const { data: pd = {} } = await getAuthPositionData({ id })
        pd.label = this.multLang('title_asset_g')
        pd.type = 'assetPositionIds'
        const { data: etd = {} } = await getAuthEqptTypeData({ id })
        etd.label = this.multLang('title_asset_c')
        etd.type = 'assetCategoryIds'
        const { data: wtd = {} } = await getAuthWorkTypeData({ id })
        wtd.label = this.multLang('title_category_x')
        wtd.type = 'workTypeRoleIds'
        ad.push(pd, etd, wtd)
      }
      this.authData = ad
    }
  }
}
</script>
<style lang="scss">
.v-auth {
  &-mgt {
  }
  &-bot {
    height: calc(100% - 42px);
  }
  &-title {
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  &-search {
  }
  &-menu {
    box-sizing: border-box;
    height: calc(100% - 118px);
    padding: 20px;
    background-color: #fff;
  }
  &-tabs {
    margin-top: 10px;
    &-edit-close {
      height: calc(100% - 168px);
    }
    &-edit-open {
      height: calc(100% - 205px);
    }
  }
}
</style>
